<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>

    <script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <style>
        .readonly-input .el-input__inner {
            background-color: #e2dfdf;
        }

        .el-table td {
            border-bottom-width: 0px;
            border-right-width: 0px;
        }

        .el-input-group__append, .el-input-group__prepend {
            padding: 0 10px;
        }
    </style>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>  -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
</head>
<body>

<div id="app" class="clinbrain-inPatient" v-cloak>
    <div class="header">
        <el-form size="mini" :inline="true">
            <el-form-item label="医院：">
                <el-input v-model="Options.Hospital.HospitalName" placeholder="医院名称" style="width:120px;"
                          v-bind:readonly="readonly" v-bind:class="readonly?'readonly-input':''">
                    <el-button slot="append" icon="el-icon-search" v-on:click="GetHospital"></el-button>
                </el-input>
                <el-dialog title="医院" :visible.sync="Options.Hospital.DialogTableVisible">
                    <el-table :data="Options.Hospital.Data" height="300">
                        <el-table-column label="选择" width="55">
                            <template scope="scope">
                                <el-radio class="radio" v-model="vm.Options.Hospital.HospitalNo"
                                          :label="scope.row.HospitalNo">&nbsp;
                                </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="HospitalNo" label="医院编码" width="200"></el-table-column>
                        <el-table-column property="HospitalName" label="医院名称" width="300"></el-table-column>
                    </el-table>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-on:click="Options.Hospital.DialogTableVisible=false">取 消</el-button>
                        <el-button type="primary" v-on:click="SelectHospital">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
            <el-form-item label="科室：">

                <el-input v-model="PageHospitalRequest.Data.CurrentDeptName" placeholder="科室名称" style="width:120px;"
                          v-bind:readonly="readonly" v-bind:class="readonly?'readonly-input':''">
                    <el-button slot="append" icon="el-icon-search" v-on:click="GetDepartment"></el-button>
                </el-input>
                <el-dialog title="科室" :visible.sync="Options.Department.DialogTableVisible">
                    <el-input v-model="Options.Department.KeyWord" @keyup.native="GetDepartment" placeholder="科室名称"
                              style="width:auto"></el-input>
                    <el-button type="primary" placeholder="科室名称" v-on:click="GetDepartment">查 询</el-button>
                    <span style="color:red;font-size:12px; margin-left:10px;">默认显示100条，如果没有找到想要的科室请查询</span>
                    <el-table :data="Options.Department.Data" height="300">
                        <el-table-column label="选择" width="55">
                            <template scope="scope">
                                <el-radio class="radio" v-model="vm.Options.Ward.DeptCode" :label="scope.row.DeptCode">
                                    &nbsp;
                                </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="DeptCode" label="科室编码" width="150"></el-table-column>
                        <el-table-column property="DeptName" label="科室名称" width="200"></el-table-column>
                        <el-table-column property="DeptLevel" label="科室级别"></el-table-column>
                    </el-table>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-on:click="Options.Department.DialogTableVisible=false">取 消</el-button>
                        <el-button type="primary" v-on:click="SelectDepartment">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
            <el-form-item label="病区：">
                <el-input v-model="PageHospitalRequest.Data.WardName" placeholder="病区名称" style="width:120px;"
                          v-bind:readonly="readonly" v-bind:class="readonly?'readonly-input':''">
                    <el-button slot="append" icon="el-icon-search" v-on:click="GetWard"></el-button>
                </el-input>
                <el-dialog title="病区" :visible.sync="Options.Ward.DialogTableVisible" width="500">
                    <el-input v-model="Options.Ward.KeyWord" @@keyup.native="GetWard" placeholder="病区名称"
                              style="width:auto"></el-input>
                    <el-button type="primary" v-on:click="GetWard">查 询</el-button>
                    <span style="color:red;font-size:12px; margin-left:10px;">默认显示100条，如果没有找到想要的病区请查询</span>
                    <el-table :data="Options.Ward.Data" height="300">
                        <el-table-column label="选择" width="55">
                            <template scope="scope">
                                <el-radio class="radio" v-model="PageHospitalRequest.Data.WardName"
                                          :label="scope.row.WardName">&nbsp;
                                </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="WardCode" label="病区编码" width="150"></el-table-column>
                        <el-table-column property="WardName" label="病区名称"></el-table-column>
                    </el-table>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-on:click="Options.Ward.DialogTableVisible=false">取 消</el-button>
                        <el-button type="primary" v-on:click="SelectWard">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
            <el-form-item label="姓名：">
                <el-input v-model="PageHospitalRequest.Data.PatientName" style="width:120px;" placeholder="请输入内容"
                          @@keydown.native="keyDown"></el-input>
            </el-form-item>
            <el-form-item label="患者标识：">
                <el-input v-model="PageHospitalRequest.Data.PatientID" style="width:120px;" placeholder="请输入内容"
                          @@keydown.native="keyDown"></el-input>
            </el-form-item>
            <el-form-item label="身份证：">
                <el-input v-model="PageHospitalRequest.Data.IDCard" style="width:120px;" placeholder="请输入内容"
                          @@keydown.native="keyDown"></el-input>
            </el-form-item>
            <el-form-item>
                <i class="el-icon-search clinBrain-search" v-on:click="QueryHospitalList(1)"></i>
            </el-form-item>
        </el-form>
        <div class="right">
            <el-switch active-text="列表"
                       v-model="activeTab" active-value="1" inactive-value="2"
                       inactive-text="磁贴">
            </el-switch>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="com-not-data" v-if="isNotData&isLoading==false">
            暂无数据
        </div>
        <div class="spinner-box" v-if="isLoading">
            <div class="pulse-container">
                <div class="pulse-bubble pulse-bubble-1"></div>
                <div class="pulse-bubble pulse-bubble-2"></div>
                <div class="pulse-bubble pulse-bubble-3"></div>
            </div>
        </div>
        <div v-if="isLoading==false&&isNotData==false" style="overflow-y:auto;height:calc(100% - 30px);">
            <div class="clinBrain-crads" v-if="activeTab==2">
                <div v-for="(item,index) in PageHospitalList.Data" v-on:click="onCardClick(item)" class="clinBrain-card"
                     :layuimini-content-href='"/html/cdr/personal/index?patientId=" + item.PatientID + "&visitNumber=" + item.VisitNumber +"&oporIp=IP"'
                     :data-title="item.PatientName">
                    <div :class="item.SexName=='男'?'header background-blue':'header background-orange'">
                        <div>患者姓名:{{item.PatientName}}</div>
                        <div>床号:{{item.BedCode}}</div>
                    </div>
                    <div class="content">
                        <div>{{item.SexName}}&nbsp;|&nbsp;{{item.CurrentAge}}&nbsp;{{item.CurrentDeptName}}&nbsp;{{item.WardName}}</div>
                        <div>{{item.AdmissionDxDescription}}</div>
                    </div>
                    <div class="footer">
                        <span>{{item.DirectorDoctorName}}</span>
                        <span>在科{{item.DaysInHospital}}天</span>
                        <span>{{item.NursingLevel}}</span>
                    </div>

                </div>

            </div>
            <div class="clinBrain-list" v-if="activeTab==1">
                <el-table :data="PageHospitalList.Data" :row-style="rowStyle" row-key="PatientID" border
                          @current-change="onCurrentChange" style="width: 100%" @row-dblclick="onCardClick">
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="PatientID" label="患者标识"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="PatientName" label="患者姓名"
                                     width="100"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SexName" label="性别"
                                     width="60"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="IDCard" label="身份证号"
                                     width="150"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="CurrentDeptName" label="科室"
                                     width="100"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="WardName" label="病区"
                                     width="100"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BedCode" label="所在病床"
                                     width="100"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="InHospitalDate" label="入院日期"
                                     width="160"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="AdmissionDxDescription" label="入院诊断"
                                     width="160"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="DirectorDoctorName" label="主治医师"
                                     width="80"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="NursingLevel" label="护理级别"
                                     width="80"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="clinBrain-page" v-if="isLoading==false&&isNotData==false">
            <div class="left">共计{{PageHospitalList.TotalCount}}条数据</div>
            <div class="right">
                <el-pagination :current-page.sync="PageHospitalList.PageIndex" :page-size="PageHospitalList.PageSize"
                               layout="prev, pager, next,jumper" :total="PageHospitalList.TotalCount"
                               @current-change="QueryHospitalList">
                </el-pagination>
            </div>
        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            isLoading: false,
            isNotData: false,
            Modular: true,
            ListTable: false,
            readonly: true,
            SelectedTab: 1,
            // 行高改变的一些字段
            targetTd: null,
            coltargetTd: null,
            resizeable: false,
            mousedown: false,
            activeTab: 1,
            PageHospitalRequest: {
                Data: {
                    HospitalNo: "",
                    CurrentDeptName: "",
                    WardName: "",
                    PatientName: "",
                    PatientID: "",
                    IDCard: "",
                    PatientTypes: []
                },
                PageIndex: 0,
                PageSize: 30
            },
            PageHospitalList: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
                Data: []
            },
            Options: {
                Hospital: {
                    KeyWord: "",
                    HospitalNo: "",
                    HospitalName: "",
                    DialogTableVisible: false,
                    Data: []
                },
                Department: {
                    KeyWord: "",
                    DialogTableVisible: false,
                    Data: []
                },
                Ward: {
                    KeyWord: "",
                    DeptCode: "",
                    DialogTableVisible: false,
                    Data: []
                }
            }
        },
        created: function () {
            this.isLoading = true;
            var _this = this;
            clinBrain.request({
                url: "/pms/query",
                params: {
                    code: "com.base.api.cdr.PatientSqlQuery",
                    PageHospitalRequest: this.PageHospitalRequest
                }
            }, this).success(function (resp) {
                debugger;
                _this.isLoading = false;
                _this.isNotData = !resp.data.PageHospitalList;
                // vm.PageHospitalRequest = resp.data.PageHospitalRequest;
                vm.PageHospitalList = resp.data.PageHospitalList;
                // vm.Options = resp.data.Options;
            });
        },
        methods: {
            //分页查询
            PageHospitalList: function (val) {
                vm.PageHospitalRequest.PageSize = val;
                vm.QueryHospitalList();
            },
            //查询在院患者
            QueryHospitalList: function (val) {
                if (val)
                    vm.PageHospitalRequest.PageIndex = val;
                this.isLoading = true;
                var _this = this;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.PatientSqlQuery",
                        PageHospitalRequest: this.PageHospitalRequest
                    }
                }, this).success(function (resp) {
                    _this.isLoading = false;
                    vm.PageHospitalList = resp.data.PageHospitalList;
                    _this.isNotData = !resp.data.PageHospitalList;
                });
            },
            modeClick(type) {
                if (type == 0) {
                    this.ListTable = false;
                    this.Modular = true;
                } else {
                    this.ListTable = true;
                    this.Modular = false;
                }
            },
            /**
             *回车事件(查询）
             */
            keyDown(event) {
                var e = event || window.event;
                if (e && e.keyCode == 13) {
                    this.QueryHospitalList(1)
                }
            },
            onCardClick(row) {
                window.miniTab.listen();
            },
            onTabClick(item) {
                this.SelectedTab = item
                this.SelectedController = item
            },
            onCurrentChange(row) {
                this.selectedRow = row
            },
            rowStyle(row) {
                if (row.row == this.selectedRow) {
                    return {background: 'rgb(219,220,225)'}
                }
                return {};
            },
            GetDepartment: function (e) {
                if (e && e.keyCode && e.keyCode != 13) {
                    return;
                }
                vm.Options.Department.DialogTableVisible = true;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.DepartmentInfo",
                        params: {
                            KeyWord: vm.Options.Department.KeyWord.toUpperCase(),
                            HospitalNo: vm.Options.Hospital.HospitalNo
                        }
                    }
                }, this).success(function (resp) {
                    vm.Options.Department.Data = resp.data.Data;
                });
            },
            GetHospital: function (e) {
                if (e && e.keyCode && e.keyCode != 13) {
                    return;
                }
                vm.Options.Hospital.DialogTableVisible = true;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.HospitalInfo"
                    }
                }, this).success(function (resp) {
                    vm.Options.Hospital.Data = resp.data.Data;
                });
            },

            SelectHospital: function () {
                for (var i = 0; i < vm.Options.Hospital.Data.length; i++) {
                    if (vm.Options.Hospital.Data[i].HospitalNo === vm.Options.Hospital.HospitalNo) {

                        vm.PageHospitalRequest.Data.HospitalNo = vm.Options.Hospital.Data[i].HospitalNo;
                        vm.Options.Hospital.HospitalName = vm.Options.Hospital.Data[i].HospitalName;
                        break;
                    }
                }
                vm.Options.Hospital.DialogTableVisible = false;
                vm.QueryHospitalList(1);
            },
            SelectDepartment: function () {
                for (var i = 0; i < vm.Options.Department.Data.length; i++) {
                    if (vm.Options.Department.Data[i].DeptCode === vm.Options.Ward.DeptCode) {
                        vm.PageHospitalRequest.Data.CurrentDeptName = vm.Options.Department.Data[i].DeptName;
                        break;
                    }
                }
                vm.PageHospitalRequest.Data.WardName = "";
                vm.Options.Department.DialogTableVisible = false;
                vm.QueryHospitalList(1);
            },
            GetWard: function (e) {
                if (e && e.keyCode && e.keyCode != 13) {
                    return;
                }
                vm.Options.Ward.DialogTableVisible = true;
                clinBrain.request({
                    url: "/comdata/Ward",
                    params: {
                        KeyWord: vm.Options.Ward.KeyWord.toUpperCase(),
                        DeptCode: vm.Options.Ward.DeptCode,
                        HospitalNo2: vm.Options.Hospital.HospitalNo
                    }
                }, this).success(function (resp) {
                    vm.Options.Ward.Data = resp.data.Data;
                });
            },
            SelectWard: function () {
                vm.Options.Ward.DialogTableVisible = false;
                vm.QueryHospitalList(1);
            },

        },
        filters: {
            getAge: function (val) {
                var mi = new Date(val.CurrentDate) - new Date(val.BirthDay);
                var year = parseInt(mi / 1000 / 60 / 60 / 24 / 365);
                if (year >= 3) return year + "岁";
                var day = parseInt(mi / 1000 / 60 / 60 / 24);
                if (year >= 1) {
                    return "{year}岁{mo}月".format({year: year, mo: parseInt((day - year * 365) / 30)});
                }
                var mo = parseInt(day / 30);
                return "{mo}月{day}天".format({mo: mo, day: day - mo * 30});
            }
        }
    });
</script>
<script>
    layui.use(['miniTab'], function () {
        var $ = layui.jquery,
            miniTab = layui.miniTab;
        window.miniTab = miniTab;
    })
</script>
</html>


